<!--  -->
<template>
  <div id="Analysis">
    <!-- 头部 -->
    <v-header></v-header>
    <!-- 内容 -->
    <div class="Analysis-box">
      <div class="btn">
        <button @click="bank_go">返回</button>

      </div>
      <template v-for="(item, index) in analysisData">
        <div class="font"
             :key="index">
          <p style="white-space: pre-wrap;">{{index + 1}}、{{item.title}}</p>
          <div v-if="item.title_img.length !== 0">
            <template v-for="(i, index) in item.title_img">
              <img :key="index" :src="baseUrl+i" alt="">
            </template>
          </div>
          <div>
            <div v-if="item.all_img.length !==0">
              <template v-for="(i, index) in item.all_img">
                <img :key="index" :src="baseUrl + i" alt="">
              </template>
            </div>
            <div v-else>
              <p v-if="item.type !=='brief' && item.type !=='pack'">A . {{item.A}}</p>
              <div v-if="item.A_img.length !==0">
                <template v-for="(i, index) in item.A_img">
                  <img :key="index" :src="baseUrl + i" alt="">
                </template>
              </div>
              <p v-if="item.type !=='brief' && item.type !=='pack'">B . {{item.B}}</p>
              <div v-if="item.B_img.length !==0">
                <template v-for="(i, index) in item.B_img">
                  <img :key="index" :src="baseUrl + i" alt="">
                </template>
              </div>
              <p v-if="item.type==='one' || item.type==='question' || item.type==='indefinite' && item.C">C . {{item.C}}</p>
              <div v-if="item.C_img.length !==0">
                <template v-for="(i, index) in item.C_img">
                  <img :key="index" :src="baseUrl + i" alt="">
                </template>
              </div>
              <p v-if="item.type==='one' || item.type==='question' || item.type==='indefinite' && item.D">D . {{item.D}}</p>
              <div v-if="item.D_img.length !==0">
                <template v-for="(i, index) in item.D_img">
                  <img :key="index" :src="baseUrl + i" alt="">
                </template>
              </div>
              <p v-if="item.type==='question' || item.type==='indefinite' && item.E">E . {{item.E}}</p>
              <div v-if="item.E_img.length !==0">
                <template v-for="(i, index) in item.E_img">
                  <img :key="index" :src="baseUrl + i" alt="">
                </template>
              </div>
            </div>
          </div>
          <div>
            <p>【正确答案】
              <template v-for="(i, x) in item.answer">
                <span style="white-space: pre-wrap;" :key="x">{{i}}&nbsp;&nbsp;</span>
              </template>
            </p>
            <div v-if="item.answer_img.length !==0">
              <template v-for="(i, index) in item.answer_img">
                <img :key="index" :src="baseUrl + i" alt="">
              </template>
            </div>
          </div>
          <div>
            <p>【答案解析】
              <template v-for="(i, x) in item.analysis">
                <span style="white-space: pre-wrap;" :key="x">{{i}}</span>
              </template>
            </p>
            <div v-if="item.analysis_img.length !==0">
              <template v-for="(i, index) in item.analysis_img">
                <img :key="index" :src="baseUrl + i" alt="">
              </template>
            </div>
          </div>

        </div>
      </template>

    </div>
    <!-- 尾部 -->
    <v-footer></v-footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import baseUrl from '../api/setBaseUrl.js'

export default {
  name: 'Analysis',
  components: {
    'v-header': Header,
    'v-footer': Footer
  },
  data () {
    return {
      analysisData: [],
      baseUrl: baseUrl
    }
  },

  computed: {},

  mounted () {
    console.log(this.$route.query.err)

    if (this.$route.query.err) {
      this.$http.wrong({
        phone: localStorage.getItem('mobile'),
        id: this.$route.query.selectId
      }).then((res) => {
        console.log(res)
        for (let item of res.data.data) {
          for (let i of item.analysis) {
            i = i.replace(/\r\n/g, '<br>')
          }
        }
        this.analysisData = res.data.data
      }).catch((err) => {
        console.log(err)
      })
    } else {
      this.$http.app({
        phone: localStorage.getItem('mobile'),
        id: this.$route.query.selectId
      }).then((res) => {
        console.log(res)
        for (let item of res.data.data) {
          for (let i of item.analysis) {
            i = i.replace(/\r\n/g, '<br/>')
          }
        }
        this.analysisData = res.data.data
      }).catch((err) => {
        console.log(err)
      })
    }
  },

  methods: {
    // 返回
    bank_go () {
      this.$store.state.params = false
      this.$router.go(-1)
    }
  }
}

</script>
<style lang='less' scoped>
#Analysis {
  height: 100%;
  .Analysis-box {
    width: calc(100% - 108px);
    height: calc(100% - 108px);
    overflow: auto;
    padding: 0 54px;
    text-align: left;
    .btn {
      padding: 20px 0;
      button {
        background: url("../assets/img/hand_btn.png");
        background-size: 100% 100%;
        border: none;
        padding: 5px 20px;
        color: white;
      }
    }
    .font {
      font-size: 14px;
      line-height: 30px;
      span {
        color: #1073d0;
      }
    }
    img{
      max-width: 100%;
    }
  }
}
</style>
